<template>
  <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图 -->
      <el-card>
        <!-- 提示区域 -->
        <el-alert
            title="添加商品信息"
            type="info"
            show-icon
            center
            :closable="false">
        </el-alert>
        <!-- 步骤条 -->
        <!-- 
            align-center表示居中对齐 
            active属性，接受一个Number，表明步骤的 index，从 0 开始。
            - 0 是将字符串类型的数字转成字符串
        -->
        <el-steps align-center :active="active - 0" finish-status="success">
            <el-step title="基本信息"></el-step>
            <el-step title="商品参数"></el-step>
            <el-step title="商品属性"></el-step>
            <el-step title="商品图片"></el-step>
            <el-step title="商品内容"></el-step>
            <el-step title="完成"></el-step>
        </el-steps>
        <!-- 左侧导航 -->
        <!-- v-model接收字符串，值为 el-tab-pane中的name属性 -->
        <el-form :model="addGoodForm" :rules="addGoodFormRules" ref="addGoodFormRef" label-width="100px" label-position='top'>
            <el-tabs tab-position="left" v-model="active" :beforeLeave='beforeTagLeave' @tab-click="tabClicked">
                <el-tab-pane label="基本信息" name='0'>
                        <!-- 基本信息表单项 -->
                        <el-form-item label="商品名称" prop="goods_name">
                            <el-input v-model="addGoodForm.goods_name"></el-input>
                        </el-form-item>
                        <!-- 记得转为数字,因为最后发送请求时,参数要求是数字 -->
                        <el-form-item label="商品价格" prop="goods_price">
                            <el-input v-model.number="addGoodForm.goods_price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品重量" prop="goods_weight">
                            <el-input v-model.number="addGoodForm.goods_weight"></el-input>
                        </el-form-item>
                        <el-form-item label="商品数量" prop="goods_number">
                            <el-input v-model.number="addGoodForm.goods_number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品分类" prop="goods_introduce">
                            <el-cascader :options="goodsCategory" :props="props" v-model="addGoodForm.goods_cat" @change="handleChange"></el-cascader>
                        </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品参数" name='1'>
                    <!-- 渲染选中的三级分类商品的参数 -->
                    <el-form-item :label="item.attr_name" v-for="item in manyTableData" :key="item.attr_id">
                        <!-- 渲染选中的三级分类所拥有的商品参数的参数值 -->
                        <!-- 当取消选中时,manyTableData会自动更新为选中的数据 -->
                        <el-checkbox-group v-model="item.attr_vals">
                            <el-checkbox border :label="v" v-for="(v,index) in item.attr_vals" :key="index"></el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品属性" name='2'>
                    <!-- 渲染选中的三级分类商品的属性 -->
                    <el-form-item :label="item.attr_name" v-for="item in onlyTableData" :key="item.attr_id">
                        <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="商品图片" name='3'>
                    <!-- 
                        action表示图片要上传到的服务器地址
                        on-preview图片预览触发
                        on-remove图片删除触发
                        list-type决定组件渲染的UI效果
                        header设置请求头
                    -->
                    <el-upload
                        :action="uploadURL"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        list-type="picture"
                        :headers="headerObj"
                        :on-success="handleSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-tab-pane>
                <el-tab-pane label="商品内容" name='4'>
                    <!-- 富文本编辑器组件 -->
                    <quill-editor v-model="addGoodForm.goods_introduce"></quill-editor>
                    <el-button type="primary" @click='add'>添加商品</el-button>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        
      </el-card>
      <!-- 图片预览窗口 -->
      <el-dialog
        title="图片预览"
        :visible.sync="pictureDialogVisible"
        width="50%">
        <img :src="pictureSrc" style="width:100%"> 
      </el-dialog>
  </div>
</template>

<script>
// 引用 lodash,做深拷贝(拷贝出来的数据与源数据没有联系) addGoodFrom,因为级联选择器需要绑定一个数组,而请求要求是字符串
import _ from 'lodash'
export default {
    name:'Add',
    data(){
        const checkGoods_price=function(rule,value,callback){
            if(value!==0) return callback()
            callback(new Error('商品价格不能为0')) 
        }
        const checkGoods_number=function(rule,value,callback){
            if(value!==0) return callback()
            callback(new Error('商品数量不能为0')) 
        }
        return{
            // 步骤条
            active:'0',
            // 添加商品的参数对象
            addGoodForm:{
                goods_name:'',
                // 级联选择器选中的三个级别分类 id
                goods_cat:[],
                goods_price:0,
                goods_number:0,
                goods_weight:0,
                goods_introduce:'',
                // 上传的图片临时路径
                pics:[],
                // 商品的参数（数组），包含 `动态参数` 和 `静态属性`
                attrs:[],
            },
            // 添加商品的验证规则
            addGoodFormRules:{
                goods_name:[
                    {required:true,message:'请输入商品名称',trigger:'blur'}
                ],
                goods_price:[
                    {required:true,message:'请输入商品价格',trigger:'blur'},
                    {validator:checkGoods_price,trigger:'blur'}
                ],
                goods_number:[
                    {required:true,message:'请输入商品数量',trigger:'blur'},
                    {validator:checkGoods_number,trigger:'blur'}
                ],
                goods_weight:[
                    {required:true,message:'请输入商品重量',trigger:'blur'}
                ],
            },
            // 保存商品分类
            goodsCategory:[],
            // 级联选择器配置
            props:{
                expandTrigger:'hover',
                value:'cat_id',
                label:'cat_name'
            },
            // 保存商品参数
            manyTableData:[],
            // 保存商品属性
            onlyTableData:[],
            // 商品图片的上传地址
            uploadURL:'http://127.0.0.1:8888/api/private/v1/upload',
            // 图片上传组件(upload)的请求头对象    
            // 为什么要设置?  因为此组件在发送AJAX请求时,没有用axios,所以在 main.js中配置的 axios拦截器并未生效
            //               不能够得到 token令牌,所以要设置请求头
            headerObj:{
                Authorization:sessionStorage.getItem('token')
            },
            // 控制图片预览框是否出现
            pictureDialogVisible:false,
            // 预览图片的完整路径
            pictureSrc:''
        }
    },
    created(){
        // 获取全部分类
        this.getGoodsCategory()
    },
    methods:{
        async getGoodsCategory(){
            const {data:res} = await this.$http.get('categories',{params:{type:3}})
            if(res.meta.status!==200) return this.$message.error('获取全部商品分类失败');
            this.goodsCategory=res.data
            // console.log(res);
        },
        // 当级联选择器选项变化时触发
        handleChange(){
            // console.log(this.addGoodForm.goods_cat);
            // 如果没有选中三级分类，则清空数组
            if(this.addGoodForm.goods_cat.length!==3){
                this.addGoodForm.goods_cat=[]
                this.$message.warning('只能选中三级分类')
            }
        },
        // tag标签切换之前触发
        beforeTagLeave(newName,oldName){
            // 如果没有选中三级分类，则不允许切换tag
            if(this.addGoodForm.goods_cat.length!==3){
                this.$message.warning('请先选择商品三级分类')
                return false
            }
        },
        // tab标签点击后触发
        async tabClicked(){
            // console.log(this.active);
            // console.log(this.manyTableData);
            // 获取商品参数
            if(this.active==='1'){
                const {data:res} = await this.$http.get(`categories/${this.addGoodForm.goods_cat[2]}/attributes`,{params:{sel:'many'}})
                if(res.meta.status!==200) return this.$message.error('获取商品参数列表失败')
                // 将数据中的 attr_vals变为数组之后再保存
                res.data.forEach(item=>{
                    item.attr_vals = item.attr_vals.length===0 ? [] : item.attr_vals.split(',')
                })
                // console.log('manyTableData',res.data);
                // 将数据保存
                this.manyTableData = res.data
            }
            // 获取商品属性
            else if(this.active==='2'){
                const {data:res} = await this.$http.get(`categories/${this.addGoodForm.goods_cat[2]}/attributes`,{params:{sel:'only'}})
                if(res.meta.status!==200) return this.$message.error('获取商品属性列表失败')
                // console.log(res.data);
                // 将数据保存
                this.onlyTableData = res.data
            }
        },
        // 上传图片预览触发
        handlePreview(file){
            this.pictureDialogVisible=true
            this.pictureSrc=file.response.data.url
        },
        // 上传图片删除触发
        handleRemove(file){
            // 将图片临时路径从添加商品对象中删除
            // console.log(file);
            this.addGoodForm.pics.forEach((item,i)=>{
                if(item.pic === file.response.data.tmp_path){
                    // 移除
                    this.addGoodForm.pics.splice(i,1)
                }
            })
            // console.log(this.addGoodForm.pics);
        },
        // 图片上传成功触发
        handleSuccess(response){
            // console.log(response);
            // 将服务器返回的图片临时路径保存到添加商品对象中
            const picInfo = {pic:response.data.tmp_path}
            this.addGoodForm.pics.push(picInfo)
            // console.log(this.addGoodForm.pics);
        },
        // 全部输入完成之后添加商品
        add(){
            // console.log(this.addGoodForm);
            // 深度克隆
            const form = _.cloneDeep(this.addGoodForm)
            // 将分类列表转成字符串
            form.goods_cat = form.goods_cat.join(',')
            // console.log(form);
            // 处理参数
            this.manyTableData.forEach(item=>{
                const newInfo = {
                    attr_id:item.attr_id,
                    attr_valus:item.attr_vals.join(',')
                }
                form.attrs.push(newInfo)
            })
            // 处理属性
            this.onlyTableData.forEach(item=>{
                const newInfo = {
                    attr_id:item.attr_id,
                    // 商品属性是字符串
                    attr_valus:item.attr_vals
                }
                form.attrs.push(newInfo)
            })
            console.log(form);
            // 表单预验证
            this.$refs.addGoodFormRef.validate(async boolean=>{
                if(!boolean) return this.$message.error('表单预验证失败')
                // 发送请求
                const {data:res} = await this.$http.post('goods',form)
                // console.log(res.data);
                if(res.meta.status!==201) return this.$message.error('添加商品失败')
                this.$message.success('添加商品成功')
                // 跳转页面
                this.$router.push('/goods')
            })
        }
    }
}
</script>

<style scoped>
    .el-breadcrumb{
        margin-bottom: 20px;
    }
    .el-steps{
        margin: 20px 0;
    }
    /* 复选框样式 */
    .el-checkbox{
        margin: 0 10px 0 0 !important;
    }
    .quill-editor{
        margin-bottom: 20px;
    }
</style>